<!DOCTYPE html>

<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>Index</title>
		<script src="~/js/vue2.6.10.js"></script>
		<link href="~/css/element-ui.css" rel="stylesheet" />
		<script src="~/js/element-ui.js"></script>
		<script src="~/js/jquery-1.7.2.js"></script>
		<script src="~/js/axios.js"></script>
		<script src="~/js/qs.js"></script>

		<script src="~/js/utils.js"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}

			.el-pagination {
				margin-left: 45%;
				margin-top: 2%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" style="margin: 0 auto;">
				<el-table-column prop="id" label="编号" align="center" width="60"></el-table-column>
				<el-table-column prop="makerDN" label="制章人信息" align="center" width="100"></el-table-column>
				<el-table-column prop="sealName" label="印章名称" align="center" width="100"></el-table-column>
				<el-table-column label="印章类型" align="center" width="80">
					<template slot-scope="scope">
						{{scope.row.sealType=='1'?'单位印章':'个人印章'}}
					</template>
				</el-table-column>
				<el-table-column prop="userDN" label="用户信息" align="center" width="120"></el-table-column>
				<el-table-column label="印章图片" align="center" width="180">
					<template slot-scope="scope">
						<img :src=" 'data:image/png;base64,'+scope.row.sealImage">
					</template>
				</el-table-column>
				<el-table-column prop="startTime" label="有效起始时间" align="center" width="110"></el-table-column>
				<el-table-column prop="endTime" label="有效截止时间" align="center" width="110"></el-table-column>
				<el-table-column prop="isAudit" label="状态" align="center" width="80"></el-table-column>
				<el-table-column label="操作"  v-cloak width="220">
					<template slot-scope="scope">
						<el-button v-cloak type="text" v-on:click="Operation(scope.row,scope.$index,'auditAdopt')" :disabled="!scope.row.btn.auditAdopt">通过</el-button>
						<el-button v-cloak type="text" v-on:click="Operation(scope.row,scope.$index,'auditNoAdopt')" :disabled="!scope.row.btn.auditNoAdopt">不通过</el-button>
						<el-button v-cloak type="text" v-on:click="Operation(scope.row,scope.$index,'frozen')" :disabled="!scope.row.btn.frozen">冻结</el-button>
						<el-button v-cloak type="text" v-on:click="Operation(scope.row,scope.$index,'backFrozen')" :disabled="!scope.row.btn.backFrozen">撤销</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<el-pagination background layout="prev, pager, next" :total="page.total" v-on:current-change="handleCurrentChange"
			 :current-page="page.PageIndex" :page-size="page.PageSize" class="el-pagination"></el-pagination>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					// base64: '',
					page: {
						PageSize: 10,
						PageIndex: 1,
						total: 1
					},
					tableData: [],
					btn: {
						auditAdopt: false,
						auditNoAdopt: false,
						frozen: false,
						backFrozen: false
					}
				},
				methods: {
					/*
					 * 点击页码的时候
					 */
					handleCurrentChange: function(currPage) {
						this.page.PageIndex = currPage;
						//获取数据
						this.getData();
					},
					// 获取table数据
					getData: function() {
						axios({
							method: 'post',
							url: '/ProduceSign/Index',
							data: Qs.stringify(this.page)
						}).then(res => {
							if (res.data.state == 200) {
								this.tableData = res.data.data;
								this.page.total = res.data.total;
								for(let i = 0;i<this.tableData.length;i++){
									this.tableData[i]['btn'] = null;
									this.$set(this.tableData[i], 'btn', this.btnChange(this.tableData[i].isAudit) )
								}
							} else {
								this.tableData = [];
							}
						}).catch(err => {

						});
					},
					btnChange: function(str) {
						console.log(str)
						if (str == '未审核') {
							return {
								auditAdopt:true,
								auditNoAdopt:true,
								frozen : false,
								backFrozen : false
							}
						} else if (str == '审核失败') {
							return {
								auditAdopt:false,
								auditNoAdopt:false,
								frozen : false,
								backFrozen : false,
							}
						} else if (str == '已审核') {
							return {
								auditAdopt:false,
								auditNoAdopt:false,
								frozen : true,
								backFrozen : false
							}
						} else if (str == '已冻结') {
							return {
								auditAdopt:false,
								auditNoAdopt:false,
								frozen : false,
								backFrozen : true
							}
						}
					},
					//执行操作
					Operation: function(item,index, str) {
						let string = '',
							msg = '';
						if (str == 'auditAdopt') {
							string = "AuditSeal";
							msg = "审核通过";
						} else if (str == 'auditNoAdopt') {
							string = "UnAuditSeal";
							msg = "审核不通过";
						} else if (str == 'frozen') {
							string = "FrozonSeal";
							msg = "冻结成功";
						} else if (str == 'backFrozen') {
							string = "AuditSeal";
							msg = "解冻成功";
						}
						var obj = JSON.stringify({
							Id: item.id,
							ValidateCode: "@ViewBag.ValidateCode"
						});
						ExternalEncrypt(JSON.stringify({
							CertID: getCookie("CertID"),
							//编码
							DataBase64: new Base64().encode(obj)
						}), (data) => {
							data = JSON.parse(data);
							if (data.error == "Ok") {
								axios({
									method: 'post',
									url: '/User/' + string,
									data: Qs.stringify({
										EncryptData: data.contentBase64
									})
								}).then(res => {
									console.log(res.data)
									if (res.data.state == 200) {
										this.$message({
											message: msg,
											type: 'success',
											offset: 200
										});
										this.getData();
									} else {
										this.$message({
											message: "操作失败,请刷新重试",
											type: 'warning',
											offset: 200
										});
									}
								}).catch(err => {

								});
							} else {
								this.$message({
									message: data.error,
									type: 'warning',
									offset: 200
								});
							}
						});

					}

				},
				created() {
					this.getData();
					// this.base64 = new Base64();
				}
			});
		</script>
	</body>
</html>
